<template>
  <div>
    <!-- Form -->
    <el-button type="text" @click="dialogFormVisible = true;operateType='save'">添加</el-button>

    <el-dialog title="购物车商品表" :visible.sync="dialogFormVisible" @close="handleClose">
      <el-form :model="ShopCartProduct">
        <el-form-item label="编号" :label-width="formLabelWidth">
          <el-input v-model="ShopCartProduct.id" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="购物车编号" :label-width="formLabelWidth">
          <el-input v-model="ShopCartProduct.shop_cart_id" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="商品编号" :label-width="formLabelWidth">
<!--          <el-input v-model="ShopCartProduct.product_id" autocomplete="off"></el-input>-->
          <el-select v-model="ShopCartProduct.product_id" placeholder="请选择">
            <el-option
                v-for="item in products"
                :key="item.id"
                :label="item.id"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="商品数量" :label-width="formLabelWidth">
          <el-input v-model="ShopCartProduct.product_num" autocomplete="off"></el-input>
        </el-form-item>



      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </div>
    </el-dialog>


    <el-table
        :data="ShopCartProducts"
        style="width: 100%">
      <el-table-column
          label="编号"
          width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column
          label="购物车编号"
          width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.shop_cart_id }}</span>
        </template>
      </el-table-column>

      <el-table-column
          label="商品编号"
          width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.product_id }}</span>
        </template>
      </el-table-column>

      <el-table-column
          label="商品数量"
          width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.product_num }}</span>
        </template>
      </el-table-column>



      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>

        </template>
      </el-table-column>
    </el-table>

    <!--  分页查询-->
    <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="pageSize"
        :current-page="current"
        @current-change="ShopCartProductFindAll"
    >
    </el-pagination>
  </div>
</template>
<script>
export default {
  data(){
    return{
      ShopCartProducts:[],//标签
      dialogFormVisible:false,
      formLabelWidth:"120px",
      operateType:'',
      ShopCartProduct:{id:'',shop_cart_id:'',product_id:'',product_num:''},
      total:0,//用户总数
      pageSize:5,//每一页行数
      current:0,//当前页数
      products:[]
    }
  },
  methods:{
    ShopCartProductFindAll(current){
      this.current=current
      this.$http.post('/shopCartProduct?m=page&current='+this.current+"&pageSize="+this.pageSize)
          .then(resp=>{
            this.ShopCartProducts=resp.data.data.records
            this.total=resp.data.data.total
          })
    },
    handleDelete(index,row){
      this.$confirm('是否确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.get('/shopCartProduct?m=delete&id='+row.id)
            .then(resp=>{
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.ShopCartProductFindAll(this.current);
            })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleEdit(index,row){
      this.operateType='update'
      this.ShopCartProduct=JSON.parse(JSON.stringify(row))
      this.dialogFormVisible=true
    },
    handleClose(){
      this.ShopCartProduct={id:'',shop_cart_id:'',product_id:'',product_num:''},
          this.operateType=''
    },
    handleSave(){
      if (this.operateType=='save'){
        this.$http.post('/shopCartProduct?m=save',this.$qs.stringify(this.ShopCartProduct))
            .then(resp=>{
              this.ShopCartProductFindAll(this.current);
            })
      }else {
        this.$http.post('/shopCartProduct?m=update',this.$qs.stringify(this.ShopCartProduct))
            .then(resp=>{
              this.ShopCartProductFindAll(this.current);
            })
      }
      this.dialogFormVisible=false
    },
    queryProductById(){
      this.$http.post('/product?m=findAll')
          .then(resp=>{
            this.products=resp.data.data
          })
    }
  },
  mounted() {
    this.ShopCartProductFindAll(1);
    this.queryProductById()
  }
}
</script>
